<template>
  <div>
    <div class="tab">
      <div class="tab-item" :class="resultNum==='goods'? 'active':''" @click="toggleTabs('SellGoods'),result('goods')">商品</div>
      <div class="tab-item" :class="resultNum==='ratings'? 'active':''"   @click="toggleTabs('SellRatings'),result('ratings')">评论</div>
      <div class="tab-item" :class="resultNum==='seller'? 'active':''"   @click="toggleTabs('SellSeller'),result('seller')">商家</div>
    </div>
    <keep-alive>
      <div :is='currentView'></div>
    </keep-alive>
  </div>
</template>
<script>
import SellGoods from './tabs/Goods'
import SellRatings from './tabs/Ratings'
import SellSeller from './tabs/Seller'
export default {
  name: 'SellTab',
  data () {
    return {
      currentView: 'SellGoods',
      num: ''
    }
  },
  components: {
    SellGoods,
    SellRatings,
    SellSeller
  },
  methods: {
    toggleTabs (newView) {
      this.currentView = newView
    },
    result (num) {
      this.num = num
    }
  },
  computed: {
    resultNum () {
      return this.num
    }
  }
}
</script>
<style lang='stylus' scoped>
  .tab
    display: flex
    width: 100%
    height: 40px
    line-height: 40px
    text-align: center
    .tab-item
      flex: 1
      justify-content: center
      font-size: 14px
      color: rgb(77, 85, 93)
    .active
      color rgb(240, 20, 20)
</style>
